<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript程序结构</title>
</head>

<body>
    <h1>JavaScript程序结构</h1>
    <p>三大程序结构：顺序结构、选择结构、循环结构</p>
    <script>
        // 1.顺序结构： 语句和语句块
        let a = 1;
        document.write(a + "<br>"); {
            //程序块
            let b = 2;
            // var b = 2;
            document.write(b + "<br>");
        }
        // document.write(b + "<br>");
        var c = 10; {
            var c = 20;
        }
        document.write(c + "<br>");

        // 2.选择结构
        //单分支
        if (true) {
            document.write("单分支if<br>");
        }
        //双分支
        let flag = true;
        if (flag) {
            document.write("双分支if<br>");
        } else {
            document.write("双分支else<br>");
        }
        //多分支
        let x = 10;
        if (x <= 0) {
            document.write("F<br>");
        } else if (x < 60 && x > 0) {
            document.write("E<br>");
        } else if (x < 80 && x >= 60) {
            document.write("D<br>");
        } else {
            document.write("C<br>");
        }
        //选择结构switch
        let choice = 30;
        switch (choice) {
            case 1:
                document.write("选项一<br>");
                break;
            case 2:
                document.write("选项二<br>");
                break;
            default:
                document.write("其他选项<br>");
        }

        // 3.循环结构
        let arr = [1, 2, 3, 5, 6, 7, 8, 9, 10];
        let sum = 0;
        //计数循环
        for (let i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        document.write(`求和: ${sum}<br>`);
        //条件循环
        let start = 1;
        while (start < 10) {
            document.write(`循环值: ${start++}<br>`);
        }
        start = 1;
        do{
            document.write(`循环值: ${start++}<br>`);
        }while(start < 10);

        for (let i = 0; i < 10; i++) {
            if(i === 5) break;
            document.write(`循环值: ${i}<br>`);
        }

        for (let j = 0; j < 10; j++) {
            if(j % 2 === 0) continue;
            document.write(`循环值: ${j}<br>`);
        }

        //for ... in 循环   遍历对象属性
        let person={name: "张三" ,age:18};
        for(const key in person){
            const element=person[key];
            document.write(`${key}: ${element}<br>`);
        }

        //for ... of 迭代
        let data=new Map();
        data.set("name","李四");
        data.set("age",19);
        for (const [key,value] of data) {
            document.write(`${key}: ${value}<br>`);
        }
    </script>
</body>

</html>